<template>
  <div class="card amap-example">
    <el-button @click="handlerSearch">查询</el-button>
    <div class="amap-explore">
      <AmapUI ref="amapUIRef" :opts="opts" :modules="modules" />
    </div>
  </div>
</template>

<script setup lang="ts" name="amapExample">
import { ref, reactive, nextTick } from "vue";
import AmapUI from "@/components/AmapUI/index.vue";
import type { AmapModulesOptions, MapBaseOptions } from "@/components/AmapUI/types";

const opts = reactive<MapBaseOptions>({
  center: [116.397428, 39.90923],
  zoom: 4
});
const modules = ref<AmapModulesOptions[]>([]);

const amapUIRef = ref<InstanceType<typeof AmapUI> | null>(null);
const handlerSearch = () => {
  modules.value = [
    {
      name: "InfoWindow",
      markers: [
        {
          position: [116.297428, 39.90923],
          offset: [0, -30],
          closeWhenClickMap: true
        }
      ]
    }
  ];
  nextTick(() => {
    amapUIRef.value?.loadModules();
  });
};
</script>
<style lang="scss" scoped>
.amap-example {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}
.amap-explore {
  width: calc(100% - 100px);
  height: 100%;
}
</style>
